<template>
    <div class="dh_xgj_manage">

        <div class="d_x_m-list">

            <div
                v-if="$route.query.row?true:false"
                style="text-align:center;font-size:28px;font-weight:bold;"
                >{{$route.name}}</div>
            <div v-if="$route.query.row?true:false" class="nativenum">
                <el-page-header @back="goBack" :content="$route.name">123</el-page-header>
                <span>
                    <el-badge :value="sumtotal" class="item" type="primary">
                        <span class="b00a">总提交数</span>
                    </el-badge>
                    <el-badge :value="daynum" class="item">
                        <span class="ff53">今日提交</span>
                    </el-badge>
                </span>
            </div>
            
            <div class="inquire" v-if="$route.query.row?false:true">
                <el-form :model="staffquery" :inline="true" size="mini">
                    <el-form-item label="商户名称：">
                        <el-input v-model="staffquery.name" clearable placeholder="请输入查询的用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="时间范围：">
                        <el-date-picker
                            v-model="staffquery.create_time"
                            type="daterange"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                        ></el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="requestdata(2)">查 询</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <el-table
                :data="hrtable"
                border
                stripe
                height="500"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                style="width: 100%!important;">
                    <el-table-column
                        type="index"
                        label="序号"
                        width="80">
                        <!-- <template slot-scope="scope">
                            <span title="单击快速复制" class="cup" @click="copetext(scope.row.id)">{{ scope.row.id }}</span>
                        </template> -->
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="商户名称"
                        min-width="120">
                        <template slot-scope="scope">
                            <span title="单击快速复制" class="cup" @click="copetext(scope.row.name)">{{ scope.row.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="kind"
                        label="类目名称"
                        min-width="140">
                        <template slot-scope="scope">
                            <span title="单击快速复制" class="cup" @click="copetext(scope.row.kind)">{{ scope.row.kind }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip 
                        prop="address"
                        label="经营地址"
                        min-width="210">
                        <template slot-scope="scope">
                            <span title="单击快速复制" class="cup" @click="copetext(scope.row.address)">{{ scope.row.address }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="联系方式"
                        min-width="140">
                        <template slot-scope="scope">
                            <span title="单击快速复制" class="cup" @click="copetext(scope.row.phone)">{{ scope.row.phone }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="license_url"
                        label="营业执照"
                        width="80">
                        <template slot-scope="scope">
                            <!-- <span>{{ scope.row.license_url }}</span> -->
                            <span title="右键保存图片到本地" v-if="scope.row.license_url" @click="previewImg(scope.row.license_url,1,scope.row)"><img :src="scope.row.license_url" alt=""></span>
                            <span title="单击快速复制" @click="copetext('未上传')" v-else class="g6 cup">未上传</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="门店图片"
                        width="80">
                        <template slot-scope="scope">
                            <!-- <span>{{ scope.row.logo_url }}</span> -->
                            <span title="右键保存图片到本地" v-if="scope.row.logo_url" @click="previewImg(scope.row.logo_url,2,scope.row)"><img :src="scope.row.logo_url" alt=""></span>
                            <span title="单击快速复制" @click="copetext('未上传')" v-else class="g6">未上传</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="shop_name"
                        label="店铺名称"
                        min-width="140">
                        <template slot-scope="scope">
                            <span title="单击快速复制" class="cup" @click="copetext(scope.row.shop_name)">{{ scope.row.shop_name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        show-overflow-tooltip 
                        prop="shop_address"
                        label="店铺地址"
                        min-width="210">
                        <template slot-scope="scope">
                            <span title="单击快速复制" class="cup" @click="copetext(scope.row.shop_address)">{{ scope.row.shop_address }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="门头图片"
                        width="80">
                        <template slot-scope="scope"> 
                            <span title="右键保存图片到本地" v-if="scope.row.shop_url" @click="previewImg(scope.row.shop_url,3,scope.row)"><img :src="scope.row.shop_url" alt=""></span>
                            <span title="单击快速复制" @click="copetext('未上传')" v-else class="g6">未上传</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="录入员工"
                        min-width="150">
                        <template slot-scope="scope">
                            <span title="单击快速复制" class="cup" @click="copetext(filauser(scope.row.user_id))">{{ scope.row.user_id | filuser }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="入职时间"
                        min-width="160">
                        <template slot-scope="scope">
                            <span title="单击快速复制" class="cup" @click="copetext(formatDatea(scope.row.create_time*1000))">{{  scope.row.create_time*1000 | formatDate }} {{  scope.row.create_time*1000 | formatDateBehind }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="90">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                @click="amend(scope.$index, scope.row)"
                                size="small"
                            >修改</el-button>
                            <!-- <el-button
                                type="danger"
                                @click="remove(scope.$index, scope.row)"
                                size="small"
                            >删除</el-button> -->
                        </template>
                    </el-table-column>
            </el-table>

            <div class="dialog">

                <el-dialog width="55%" title="修改员工信息" :visible.sync="dialogFormVisible" center :append-to-body='true' :lock-scroll="false" top="20vh">
								
                    <p class="dxm-ltb-text tc red mb5">*默认值是原始信息，点击原图可上传新图片，修改后提交即可</p>

                    <el-form :model="revamp" ref="revamp" :rules="rules" label-width="90px">

                        <el-form-item label="类目名称">
                            <el-select v-model="revamp.kind" clearable placeholder="请选择门店所经营的类目名称">
                                <el-option v-for="item in classname" :key="item.id" :value="item.name" :label="item.name"></el-option>
                            </el-select>
                        </el-form-item>

                        <div class="diacol">
                            <el-form-item label="店铺名称">
                                <el-input v-model="revamp.shop_name" clearable placeholder="请输入店铺名称"></el-input>
                            </el-form-item>
                            <el-form-item label="联系方式">
                                <el-input v-model="revamp.phone" clearable placeholder="请输入店铺的联系方式"></el-input>
                            </el-form-item>
                        </div>
                        <div class="diacol">
                            <el-form-item label="经营地址">
                                <el-input v-model="revamp.address" clearable placeholder="请输入经营地址"></el-input>
                            </el-form-item>
                            <el-form-item label="店铺地址">
                                <el-input v-model="revamp.shop_address" clearable placeholder="请输入店铺的详细地址"></el-input>
                            </el-form-item>
                        </div>
                        <div class="diacol">
                            <el-form-item label="营业执照" prop="content">
                                <el-upload
                                    ref="content"
                                    v-model="revamp.license_url"
                                    action="/index.php/ALiPayFileUpload/upload"
                                    name="image"
                                    :show-file-list="false"
                                    list-type="picture-card"
                                    :on-preview="coverPreview"
                                    :on-success="handlelicense"
                                >
                                    <img v-if="revamp.license_url" :src="revamp.license_url" class="avatar" />
                                    <i v-else class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>

                            <el-form-item label="门店LOGO" prop="content">
                                <el-upload
                                    ref="content"
                                    v-model="revamp.logo_url"
                                    action="/index.php/ALiPayFileUpload/upload"
                                    name="image"
                                    :show-file-list="false"
                                    list-type="picture-card"
                                    :on-preview="coverPreview"
                                    :on-success="handlelogo"
                                >
                                    <img v-if="revamp.logo_url" :src="revamp.logo_url" class="avatar" />
                                    <i v-else class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>

                            <el-form-item label="门头照片" prop="content">
                                <el-upload
                                    ref="content"
                                    v-model="revamp.shop_url"
                                    action="/index.php/ALiPayFileUpload/upload"
                                    name="image"
                                    :show-file-list="false"
                                    list-type="picture-card"
                                    :on-preview="coverPreview"
                                    :on-success="handleshop"
                                >
                                    <img v-if="revamp.shop_url" :src="revamp.shop_url" class="avatar" />
                                    <i v-else class="el-icon-plus"></i>
                                </el-upload>
                            </el-form-item>
                        </div>
                        <el-form-item>
                            <el-button type="primary" @click="refer()">提交修改</el-button>
                            <el-button @click="cancelquery()">取消</el-button>
                        </el-form-item>

                    </el-form>
                    
                </el-dialog>

                <!-- <el-dialog title="添加代理" :visible.sync="adddialog" center :append-to-body='true' :lock-scroll="false" top="20vh" width="450px">
                                    
                    <el-form :model="forminline" ref="forminline" :rules="rules" label-width="80px">
                        <el-form-item label="类目名称" prop="name">
                            <el-input v-model="forminline.name" clearable placeholder="请输入添加的类目名称"></el-input>
                        </el-form-item>
                        <el-form-item label="登录密码" prop="password">
                            <el-input v-model="forminline.password" clearable placeholder="请输入登录密码"></el-input>
                        </el-form-item>
                        <el-form-item label="姓名" prop="realname">
                            <el-input v-model="forminline.realname" clearable placeholder="请输入姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="forminline.phone" clearable placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitAss()">提交修改</el-button>
                            <el-button @click="resetForm()">取消</el-button>
                        </el-form-item>
                    </el-form>
                    
                </el-dialog> -->

                <!-- 图片预览 -->
                <el-dialog :title="diatitlename" center  max-width="700px" :visible.sync="dialogimagestate">
                    <div class="dialogimg">
                        <!-- <div><el-button type="success" @click="downs()" size="mini" class="mb5">下载</el-button></div> -->
                        <p class="dxm-ltb-text tc red mb5">*右键可以保存图片（也可以列表缩略图直接保存）</p>
                        <div><img :src="dialogimg" alt=""></div>
                    </div>
                </el-dialog>

            </div>

        </div>

        <div class="d_j_mber-block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagecount">
            </el-pagination>
        </div>

    </div>
</template>

<script>
import Clipboard from 'clipboard';
import axjs from "../js/request.js";
import {formatDate} from "../js/time.js";
import {timetamp} from "../js/time.js";
import {timedata} from "../js/time.js";
var that
export default {
    components: {},
    data() {
        return {
            // 缓存中的账号密码
            login:{},
            sumtotal:0,
            daynum: 0,
            adddialog: false,
            querydialog: false,
            dialogimagestate: false,
            dialogimg: "",
            diatitlename: "",
            routerow: null,
            // removedialog: false,
            username: null,
            classname: null,
            staffquery: {
                level: 2,
                name:"",
                create_time: ""
            },
            // 添加员工的动态绑定信息
            forminline: {
                name: "",
            },
            // 弹出层的内容数组，样式默认值等
            revamp:{
                id: "",
                kind: "",
                address: "",
                phone: "",
                license_url: "",
                logo_url: "",
                shop_name: "",
                shop_address: "",
                shop_url: "",
            },
            options: [{
                value: '1',
                label: '超级管理员'
            }, {
                value: '2',
                label: '普通用户'
            }],
            value: '2',	
            //列表数组
            hrtable:[],
            dialogFormVisible: false,           //弹出层的状态
            currentPage: 1,						//分页的默认页数
            pageSize: 100,                       //单页条数
            pagecount: 0,						//总页数
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
            rules:{
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' }
                ],
                phone: [
                    { required: true, message: '请输入手机号码', trigger: 'blur' }
                ],
                realname: [
                    { required: true, message: '请输入员工的真实姓名', trigger: 'blur' }
                ],
                arr:[
                    { required: true, message: '请选择上级代理', trigger: 'change' }
                ]
            }
        };
    },
    // 过滤器
    filters:{
        // 数组过滤成同意拒绝（函数带的形参需要对应装换值的关键字，否则未定义）
        changestate(id){
            if(id !== 0){
                var chnNumChar = ["零", "一", "二", "三", "四", "五", "六", "七", "八", "九"];
                var chnUnitSection = ["", "万", "亿", "万亿", "亿亿"];
                var chnUnitChar = ["", "十", "百", "千"];
                var strIns = "", chnStr = "";
                var unitPos = 0;
                var zero = true;
                while (id > 0) {
                    var v = id % 10;
                    if (v === 0) {
                        if (!zero) {
                            zero = true;
                            chnStr = chnNumChar[v] + chnStr;
                        }
                    } else {
                        zero = false;
                        strIns = chnNumChar[v];
                        strIns += chnUnitChar[unitPos];
                        chnStr = strIns + chnStr;
                    }
                    unitPos++;
                    id = Math.floor(id / 10);
                }
                return chnStr+"级代理";
            }
        },
        // 商户代理名称
        filuser(id){
            if(that.username !== null){
                that.username.forEach(item=>{
                    id === item.id ? id = item.username : "";
                })
            }else{return}
            return id
        },
        formatDate(time){
			var date = new Date(time);
			return formatDate(date, 'yyyy-MM-dd');
		},
		formatDateBehind(time){
			var date = new Date(time);
			return formatDate(date, 'hh:mm:ss')
		}
    },
    // 组件注册
    computed: {},
    watch: {},
    // 方法管理
    methods: {
        formatDatea(time) {							 //日期(年月日)
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm:ss');   //年月日 格式自己定义   'yyyy : MM : dd'  例 2018年12月5日的格式
        },
        filauser(id){
            if(that.username !== null){
                that.username.forEach(item=>{
                    id === item.id ? id = item.username : "";
                })
            }else{return}
            return id
        },
        // formatDateaBehind(time) {					 //时间(时分秒)
        //     var date = new Date(time);
        //     return formatDate(date, 'hh:mm:ss');     //时间点 例 21点12分12秒的格式
        // },
        goBack(){
            // 页头的返回
            this.$router.go(-1);
        },

        // 员工数据查询
        requestdata(num){
            let that = this;
            let data = {list_rows:this.pageSize,page:this.currentPage}
            data.name = this.staffquery.name;
            if(this.staffquery.create_time !== "" && this.staffquery.create_time !== null){
                data.start_time = timetamp(String(this.staffquery.create_time[0]));//开始时间
                data.end_time = timedata(this.staffquery.create_time[1]);//结束时间))
            }
            this.routerow !== null ? data.user_id = this.routerow.id : "";
            for(var i in data) data[i] === "" ? delete data[i] : "";
            // console.log(data)
            axjs.request("/aLiPayShop/list","post",JSON.stringify(data)).then(resp=>{
                console.log(resp)
                if(num === 2 ){
                    resp.data.data.total
                    ? (that.$message({
                        message: "找到"+resp.data.data.total+"条数据",
                        type: "success"
                    })) 
                    : (this.$message.error("没有符合条件数据"));
                }
                that.pagecount = resp.data.data.total;
                that.hrtable = resp.data.data.data
            })
        },
        
        // 弹出层以及修改员工信息
        amend(index,row){
            for(var i in this.revamp) this.revamp[i] = row[i];
            this.revamp.index = index;
            this.dialogFormVisible = true
            console.log( this.revamp)
        },
        // 修改店铺信息
        refer(){
            // const that = this;
            // console.log(this.revamp)
            let data = {};
            for(var i in this.revamp) this.revamp[i] !== "" && this.revamp[i] !== null && i !== "index" ? data[i] = this.revamp[i] : "";
            // if(JSON.stringify(data) !== "{}"){
                console.log(data)
                axjs.request("/aLiPayShop/update","post",JSON.stringify(data)).then(resp=>{
                    console.log(resp)
                    this.dialogFormVisible = false;
                    if(resp.data.code === 200){
                        let key = this.revamp.index;
                        for(var o in data) this.hrtable[key][o] = data[o];
                        this.$message({
                            message: "代理信息修改成功",
                            type: "success"
                        })
                    }else{return}
                })
            // }else{
            //     this.$message.error("没有可以提交的修改数据")
            // }
        },
        cancelquery(){
            that.dialogFormVisible = false;
        },

        // 图片预览
        previewImg(img,num,row){
            let arrnum = ["营业执照","门店LOGO","门头照片"]
            this.diatitlename = row.shop_name +"："+ arrnum[num-1];
            this.dialogimg = img;
            this.dialogimagestate = true;
        },

        // 图片处理
        handlelicense(resp,file,fileList){
            console.log(resp,file,fileList)
            this.revamp.license_url = "https://dzylab.dpyun.site/storage/"+resp.data;
        },
        handlelogo(resp,file,fileList){
            console.log(resp,file,fileList)
            this.revamp.logo_url = "https://dzylab.dpyun.site/storage/"+resp.data;
        },
        handleshop(resp,file,fileList){
            console.log(resp,file,fileList)
            this.revamp.shop_url = "https://dzylab.dpyun.site/storage/"+resp.data;
        },
        // 图片预览
        coverPreview(file) {
            // 点击文件列表中已上传的文件时的钩子
            // console.log(file);
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },

        downloadIamge(imgsrc, name) {//下载图片地址和图片名
            var image = new Image();
            // 解决跨域 Canvas 污染问题
            image.setAttribute("crossOrigin", "anonymous");
            image.onload = function() {
                var canvas = document.createElement("canvas");
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext("2d");
                context.drawImage(image, 0, 0, image.width, image.height);
                var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            
                var a = document.createElement("a"); // 生成一个a元素
                var event = new MouseEvent("click"); // 创建一个单击事件
                a.download = name || "photo"; // 设置图片名称
                a.href = url; // 将生成的URL设置为a.href属性
                a.dispatchEvent(event); // 触发a的单击事件
            };
            image.src = imgsrc;
        },
        // 图片下载
        downs() {
            this.downloadIamge(this.dialogimg,this.diatitlename)
            // var link = document.createElement("a");
            // link.download = this.diatitlename;
            // link.href = this.dialogimg;
            // link.click();
            // link.remove();
        },

        copetext(txt){
                //调用copy函数
            this.copy(txt);
        },
        copy(data) {
            // 存储传递过来的数据
            let OrderNumber = data;
            // 创建一个input 元素
            // createElement() 方法通过指定名称创建一个元素
            let newInput = document.createElement("input");
            // 讲存储的数据赋值给input的value值
            newInput.value = OrderNumber;
            // appendChild() 方法向节点添加最后一个子节点。
            document.body.appendChild(newInput);
            // 选中input元素中的文本
            // select() 方法用于选择该元素中的文本。
            newInput.select();
            // 执行浏览器复制命令
            //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
            document.execCommand("Copy");
            // 清空输入框
            newInput.remove();
            // 下面是element的弹窗 不需要的自行删除就好
            this.$message({
                message: "复制成功",
                type: "success",
            });
        },

        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },

        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.requestdata(1)
        },
        //分页的跳页函数
        handleCurrentChange(val) {
            this.currentPage = val;
            // console.log(`当前页: ${val}`);
            this.requestdata(1)
        },
    },
    // 全部的生命周期函数
    created() {
        if(this.$route.query.row !== undefined){
            this.routerow = JSON.parse(this.$route.query.row);

            axjs.request("/aLiPayShop/list","post",JSON.stringify({list_rows:9999999,page:1,user_id:this.routerow.id})).then(resp=>{
                this.sumtotal = resp.data.data.total;
                var date = new Date();
                let daytime = date .getFullYear()+"-"+(date .getMonth()+1)+"-"+date .getDate()+" 00:00:00"
                resp.data.data.data.forEach(item=>{
                    item.create_time > timetamp(daytime) ? this.daynum += 1 : "";
                })
            })
        }
        axjs.request("/aLiPayUser/list","post",JSON.stringify({list_rows:9999999,page:1})).then(resp=>{
            this.username = resp.data.data.data;
        })
        axjs.request("/aLiPayKind/list","post",JSON.stringify({list_rows:9999999,page:1})).then(resp=>{
            this.classname = resp.data.data.data;
        })
    },
    mounted() {
        const that = this;
        that.login = JSON.parse(sessionStorage.getItem("dh_xgj_login"))
        that.requestdata(1)
    },
    beforeCreate() {
        that = this;
    },
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {},
    destroyed() {},
    activated() {},
}
</script>
<style scoped>
    .dh_xgj_manage{
        padding: 10px;
        background-color: #ffffff;
        border-radius: 5px;
    }
    .inquire{
        border-right: 1px solid #EBEEF5;
        border-top: 1px solid #EBEEF5;
        border-left: 1px solid #EBEEF5;
        padding: 10px;
    }
    .dialogimg{
        text-align: center;
    }
    .diacol{
        /* max-width: 50%;
        width: 350px; */
        display: flex;
        flex-flow: row wrap;
    }
    .avatar {
        /* //图片大小 */
        width: 100%;
        height: 100%;
        display: block;
    }
    
    .nativenum{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }
    .item {
        margin-top: 10px;
        margin-right: 50px;
    }
    /* 分页 */
    .d_j_mber-block{
        border-right: 1px solid #EBEEF5;
        border-bottom: 1px solid #EBEEF5;
        border-left: 1px solid #EBEEF5;
    }
</style>